<template>
    <div class="e-form">
        <BillTop @cancel="onCancel"></BillTop>
        <div class="tabs">
            <div class="tabs-title" id="baseInfo">基本信息</div>
            <div style="width: 100%;" class="form">
                <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="240px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="加扣款类型:" prop="settlementType">
                                <el-select
                                    v-model="formData.settlementType"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in plusDeductionType"
                                        :key="item.kvId"
                                        :label="item.kvKey"
                                        :value="item.kvValue"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="结算日期:" prop="settlementDate">
                                <el-date-picker
                                    v-model="formData.settlementDate"
                                    value-format="yyyy-MM-dd"
                                    type="date"
                                    placeholder="请选择结算日期"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="录入机构：" prop="orgId">
                                {{ formData.orgName }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="传输财务共享："
                            :class="isFontColor ? 'redFont' : 'greenFont'"
                            >
                                <span> {{shareLable(formData.easId)}} </span>
                                <el-tooltip content="预计xxx时间传输财务" placement="top">
                                <i class="el-icon-warning-outline greenFont"></i>
                                </el-tooltip>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="状态：">
                                {{ selectTypeSetStateName }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="备注：" prop="remarks">
                                <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="formData.remarks"
                                    maxlength='500'
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="buttons">
            <el-button
                type="primary"
                style="background: #2e61d7"
                @click="onSave"
            >保存</el-button>
            <el-button @click="onCancel">取消</el-button>
        </div>
    </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { openAppClient, selectDataClient } from '@/utils/common'
import { mapState, mapMutations } from 'vuex'

let oldRouter = {} // 上一个页面来源
// eslint-disable-next-line no-unused-vars
import { addJkk } from '@/api/settlementManagement/gongchengjieshuan/jiakoukuan'
export default {
    computed: {
        ...mapState({
            userInfo: state => state.userInfo,
            shareFrom: state => state.equip.equipData.shareFrom,
        }),
        ...mapState('settlementManagement', ['jkkType']),
        //根据选中加扣款类型改变当前状态名称
        selectTypeSetStateName () {
            const typeObj = {
                1: '待汇总',
                2: '待汇总',
                3: '待审',
                4: '待审',
                5: '待审',
            }
            return typeObj[this.formData.settlementType]
        },
        //传输财务共享
        shareLable () {
            return param=> {
                const state = this.shareFrom
                const obj = state.find(x=>x.value == param)
                return (obj ?  obj.label :  '')
            }
        },
    },
    data () {
        return {
            //表单数据
            formData: {
                'amount': '',
                'baseCurAmount': 0,
                'baseCurId': '',
                'baseCurName': '',
                'baseCurRate': 0,
                'billId': '',
                'billNo': '',
                'contractId': '',
                'contractName': '',
                'currency': '',
                'currencyId': '',
                'easId': '0',
                'founderId': '',
                'founderName': '',
                'gmtCreate': '',
                'gmtModified': '',
                'nullifyCreated': '',
                'nullifyCreator': '',
                'nullifyCreatorId': '',
                'nullifyDescription': '',
                'nullifyReason': '',
                'orgId': '',
                'orgName': '',
                'outsourcerId': '',
                'outsourcerName': '',
                'period': 0,
                'remarks': '',
                'rmbAmount': 0,
                'rmbId': '',
                'rmbName': '',
                'rmbRate': 0,
                'settlementDate': '',
                'settlementType': '',
                'state': 0,
                'workId': '',
                'isSystemGeneration': 0
            },
            orgId: '', //机构id
            orgName: '', //机构名称
            isSkip: false, //是否跳转
            val: '', //冲预付款金额（元）：
            rules: {
                settlementType: [{ required: true, message: '请选择加扣款类型', trigger: ['blur', 'change'] }],
                settlementDate: [{ required: true, message: '请选择结算日期', trigger: ['blur', 'change'] }],
            },
            isFontColor: true, //传输财务共享颜色  未传，返回修改 红色   财务共享审核中，已传 绿色
            plusDeductionType: []
        }
    },
    beforeRouteEnter (to, from, next) {
        oldRouter = from
        next()
    },
    beforeRouteLeave (to, from, next) {
        oldRouter = null
        next()
    },
    mounted () {
        this.formData.orgId = this.userInfo.orgInfo.orgId
        this.formData.orgName = this.userInfo.orgInfo.orgName
        this.setPlusDeductionType()
    },
    methods: {
        ...mapMutations(['setSelectedInfo']),
        //设置加扣款类型
        setPlusDeductionType () {
            this.plusDeductionType = this.jkkType.filter(item=>item.kvValue <= 3)
        },
        viewHeTong (contractId) {
            let url = '/contractDefinitionShow'
            //当加扣款类型为其他时进入其他合同页面，其余类型均为分包合同
            if(this.settlementType == '2') {
                url = '/otherContractApplyShow'
            }
            openAppClient(`${url}?billid=${contractId}&isview=true`)
        },
        //保存按钮
        onSave () {
            this.$refs['ruleForm'].validate(async valid => {
                if (valid) {
                    const resData = await addJkk(this.formData)
                    // this.setSelectedInfo(resData)
                    // openAppClient('/showSelectedData', '选择结果')
                    this.clientPop('info', '保存成功，是否继续？', () => {
                        this.$router.replace(`/guochengJkkJieshuanEdit?billid=${resData}`)
                    }, null, () => {
                        this.$router.replace('/guochengJkkJieshuanList')
                    })
                }
            })
        },
        //取消按钮
        onCancel () {
            if (oldRouter.path === '/guochengJkkJieshuanList') {
                this.$router.back()
            } else {
                this.$router.replace('/guochengJkkJieshuanList')
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.buttons {
    left: 0;
}
.e-form {
    margin-bottom: 80px;
    padding: 0 20px;
    .tabs-title::before {
        content: '';
        height: 22px;
        width: 8px;
        border-radius: 40px;
        background-color: #2e61d7;
        display: block;
        position: absolute;
        left: 20px;
        margin-right: 20px;
    }
}

.e-table {
    background: #fff;
}

.el-tab-pane {
    margin-left: -10px;
}
</style>
